
<template>
 <div>
    <VScaleScreen :width="1920" :height="10*
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    +380" :fullScreen="true">
       <dv-full-screen-container style="width: 100vw; background:rgb(2,19,49); background-size:100% 100%;"  >
   <BorderBox11 title="数据中心"  >
      <div class="angry-grid">
         <div id="item-0">
              <BorderBox1>
               <MapCom></MapCom>
              </BorderBox1>

          </div>
      <div id="item-1">
           <BorderBox1>BorderBox2</BorderBox1>
      </div>
      <div id="item-2">
         <BorderBox1>BorderBox3</BorderBox1> 
      </div>
      <div id="item-3">
              <BorderBox1> 
                    <leida-com></leida-com>
             </BorderBox1> 
       </div>
      <div id="item-4">111</div>
      <div id="item-5">222</div>
      <div id="item-6">333</div>
      <div id="item-7">444</div>
      <div id="item-8">555</div>
    </div>
    </BorderBox11>
   </dv-full-screen-container>
   </VScaleScreen>
</div>
</template>

<script setup>
      // 地图点位弹窗子组件
      import MapCom from "../map/index.vue";
    import { BorderBox2,BorderBox3,BorderBox4,BorderBox5,BorderBox6,BorderBox7,BorderBox8,BorderBox9,BorderBox1,BorderBox11 } from '@kjgl77/datav-vue3'
    import AdaptiveView from '@/components/AdaptiveView.vue';
     import leidaCom from '../charts/leida.vue'
     import VScaleScreen from 'v-scale-screen'
</script>
<style>
.angry-grid {
   display: grid; 
   /* width: 100vw; */
   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   padding: 50px;
   box-sizing: border-box;
   gap: 10px;
   height: 100vh;
   
}
  .angry-grid>div{
   /* padding: 10px; */
   box-sizing: border-box;
   height: 240px;
  }
#item-0 {

   background-color: #785C76; 
   grid-row-start: 1;
   grid-column-start: 2;
   height: 730px;
   grid-row-end: 4;
   grid-column-end: 4;
   
}
#item-1 {

   background-color: #6FB899; 
   grid-row-start: 4;
   grid-column-start: 1;

   grid-row-end: 5;
   grid-column-end: 3;
   
}
#item-2 {

   /* background-color: #D5FB7C;  */
   grid-row-start: 2;
   grid-column-start: 4;
   height: 480px;
   grid-row-end: 4;
   grid-column-end: 5;
   
}
#item-3 {

   background-color: #C5D95F; 
   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-4 {

   background-color: #DBBE77; 
   grid-row-start: 2;
   grid-column-start: 1;

   grid-row-end: 3;
   grid-column-end: 2;
   
}
#item-5 {

   background-color: #F965D8; 
   grid-row-start: 3;
   grid-column-start: 1;

   grid-row-end: 4;
   grid-column-end: 2;
   
}
#item-6 {

   background-color: #F998DC; 
   grid-row-start: 1;
   grid-column-start: 4;

   grid-row-end: 2;
   grid-column-end: 5;
   
}
#item-7 {

   background-color: #8BDFE7; 
   grid-row-start: 4;
   grid-column-start: 4;

   grid-row-end: 5;
   grid-column-end: 5;
   
}
#item-8 {

   background-color: #599DBD; 
   grid-row-start: 4;
   grid-column-start: 3;

   grid-row-end: 5;
   grid-column-end: 4;
   
}
</style>